<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小星星</title>
<style>
#box{
    width: 100%;
    height: 80px;
    /* border:dashed 1px lime; */
    display: flex;
    align-items: center;
}
.sp{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: 100%;
    background-repeat:no-repeat; 
}
.on{
    background-image: url(./img/xx1.png);
}
@media only screen and(-webkit-device-pixel-ratio:3){
    .on{
    background-image: url(./img/xx2.png);
    }
}
.half{
    background-image: url(./img/xxb1.png); 
}
@media only screen and(-webkit-device-pixel-ratio:3){
    .half{
    background-image: url(./img/xxb2.png);
    }
}
.off{
    background-image: url(./img/xxh1.png); 
}
@media only screen and(-webkit-device-pixel-ratio:3){
    .off{
    background-image: url(./img/xxh2.png);
    }
}
#pingfen{
    width: 150px;
    height: 25px;
}
</style>    
</head>
<body>
<div id="box">
    <span class="sp  on"></span>
    <span class="sp  on"></span>
    <span class="sp  on"></span>
    <span class="sp  half"></span>
    <span class="sp  off"></span>
</div>
<p>评分: <input type="text" value="" id="pingfen" placeholder="请输入1-10进行评分">
<button id="btn">请评分</button>
</p>    

<script>
btn.onclick = function(){    
    var fen = document.querySelector('#pingfen').value;
    var pingfen = document.getElementById('pingfen')
    pingfen.innerHTML = fen;
    fen = fen * 1 / 2;
    var xia = Math.floor(fen);
    var hao = Math.round(fen - xia);
    var sp = document.querySelectorAll('.sp')
    for(var i=0;i<sp.length;i++){
        if(i<xia){
            sp[i].className = 'sp on';
        }else if(i<xia + hao){
            sp[i].className = 'sp half';
        }else{
            sp[i].className = 'sp off';
        }
    }
}






</script>
</body>
</html>